<template>
  <div class="login">
    <div class="loginBox">
      <h2 class="loginH2">搬砖银入坑验证</h2>
      <div>
        <el-form ref="loginForm" :rules="rules" :model="ruleForm">
          <el-form-item prop="user">
            <el-input
                placeholder="请输入账号"
                prefix-icon="el-icon-user"
                v-model="ruleForm.user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                v-model="ruleForm.password"
                show-password
            ></el-input>
          </el-form-item>
          <el-button
              type="primary"
              class="loginBtn"
              @click="loginYz('loginForm')"
          >请踩坑
          </el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        user: '',
        password: ''
      },
      rules: {
        user: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在3到5个字符', trigger: 'blur'}
        ],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    loginYz(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$store.dispatch('login', this.ruleForm)
              .then(res => {
                console.log(res)
                if (res.data.code === 200) {
                  console.log(res);
                  console.log(this.$store.state.token);
                  console.log("重定向" + this.$route.query.redirect);
                  if (this.$route.query.redirect) {
                    this.$router.replace(this.$route.query.redirect);
                  } else {
                    this.$router.replace('/')
                  }
                } else {
                  this.$refs.slideDiv.reset
                }

              })
        } else {
          return;
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  height: 100%;
  width: 100%;
  background: url(../assets/loginBg/loginBg.jpg) no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
}

.loginBox {
  height: 455px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  top: 20%;
}

.loginH2 {
  font-size: 38px;
  text-align: center;
  color: #ffffff;
}

.loginBtn {
  width: 100%;
  background: #19b9e7;
}
</style>